* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-transform: uppercase;
  /* font-family: "Castellar"; */

  letter-spacing: 2px;
}

body {
  font-family: "LEMONMILK-Medium";
}

a {
  text-decoration: none;
  color: #131414;
}
@font-face {
  font-style: normal;
  font-weight: normal;
  src: local("LEMONMILK-Medium"), url("./LEMONMILK-Medium.otf") format("woff");
}

::-webkit-scrollbar {
  width: 4px;
  height: 5px;
}

::-webkit-scrollbar:hover {
  width: 4px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 25px;
  margin: 8px 0;
}

::-webkit-scrollbar-thumb {
  background: #9dc6ff;
  border-radius: 25px;
}

::-webkit-scrollbar-thumb:hover {
  background: #4288d3;
}

::-webkit-scrollbar {
  width: 4px;
}

header {
  /* position: absolute; */
  top: 0;
  z-index: 5;
  left: 0;
  width: 100%;
  /* padding: 20px; */
}

header .navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* max-width: 1200px; */
  background: #ffffff;
  margin: 0 auto;
  /* padding: 10px 25px; */
}

.navbar .menu-links {
  display: flex;
  list-style: none;
  gap: 35px;
  padding: 0 15px;
}

.navbar a {
  color: #000;
  font-size: 14px;
  text-decoration: none;
  transition: 0.2s ease;
}

.navbar a:hover {
  color: #c6a597;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 5px 4px 1px 3px;
  background: #000;
  justify-content: flex-start;
  align-content: center;
  flex-direction: row;
}

.logo {
  height: auto;
  width: 178px;
}

.logo-container H1 {
  height: min-content;
  font-size: 16px;
  letter-spacing: 5px;
  color: #fff;
  font-weight: 600;
}

@media (max-width: 767px) {
  .logo-container H1 {
    font-size: 14px;
  }

  .logo {
    height: auto;
    width: 80px;
  }
}

@media (max-width: 400px) {
  .logo-container H1 {
    font-size: 12px;
  }

  .logo {
    height: auto;
    width: 85px;
  }
}

.logo2 {
  height: 29px;
  width: auto;
}

.hero-section {
  height: 100vh;
  background: #939393;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.hero-section .content {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  color: #fff;
}

.hero-section .content h2 {
  font-size: 3rem;
  max-width: 600px;
  line-height: 70px;
}

.hero-section .content p {
  font-weight: 300;
  max-width: 600px;
  margin-top: 15px;
}

.hero-section .content button {
  background: #fff;
  padding: 12px 30px;
  border: none;
  font-size: 1rem;
  border-radius: 6px;
  margin-top: 38px;
  cursor: pointer;
  font-weight: 500;
  transition: 0.2s ease;
}

.hero-section .content button:hover {
  color: #fff;
  background: #c06b3e;
}

#close-menu-btn {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
  display: none;
}

#hamburger-btn {
  color: #fff;
  cursor: pointer;
  display: none;
}

@media (max-width: 768px) {
  header {
    z-index: 2;
  }

  header.show-mobile-menu::before {
    content: "";
    position: fixed;
    z-index: 2;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
  }

  #hamburger-btn,
  #close-menu-btn {
    display: block;
    color: #000;
    font-size: 13px;
    margin: 0 10px;
  }

  .navbar .menu-links {
    position: fixed;
    top: 0;
    z-index: 2;
    right: -250px;
    width: 250px;
    height: 100vh;
    background: #fff;
    margin: 0;
    flex-direction: column;
    padding: 70px 40px 0;
    transition: left 0.2s ease;
  }

  header.show-mobile-menu .navbar .menu-links {
    left: 0;
  }

  .navbar a {
    color: #000;
  }
}

/* 


/* foooooooooooooter */
footer {
  background-size: cover;
  background-position: center;
  width: 100%;
}

.filter2 {
  bottom: 0px;
  width: 100%;
  position: relative;
  gap: 10px;
  display: flex;
  justify-content: space-between;
  padding: 30px 30px;
  background: #20252dbf;
  flex-direction: row;
}

.main-content {
  display: flex;
}

.footer-group {
  height: auto;
  display: flex;
  flex-wrap: nowrap;
  gap: 60px;
  flex-direction: row;
  align-items: flex-end;
}

.first-footer-box {
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
}

.first-footer-box img {
  height: 95px;
  margin-bottom: 10px;
}
.first-footer-box h1 {
  height: auto;
  margin-bottom: 10px;
  font-size: 20px;
  color: #89bef9;
}
.first-footer-box h2 {
  height: auto;
  color: #ffffff;
  font-size: 15px;
  margin: 3px 0;
}

.OTHER-eng {
  height: auto;
  display: flex;
  gap: 33px;
  margin: 10px 0px;
}

.OTHER-eng-left {
  height: auto;
  display: flex;
  flex-direction: column;
}

.OTHER-eng-left H1 {
  height: auto;
  font-size: 15px;
  color: #4d5e71;
}

.OTHER-eng-left H2 {
  height: auto;
  font-size: 13px;
  color: #fff;
}

.OTHER-eng-right {
  height: auto;
  display: flex;
  flex-direction: column;
}

.OTHER-eng-right H1 {
  height: auto;
  font-size: 15px;
  color: #4d5e71;
}

.OTHER-eng-right H2 {
  height: auto;
  font-size: 13px;
  color: #fff;
}

/*  */

.second-footer-box {
  height: auto;
  display: flex;
  margin: 9px;
  flex-direction: column;
  gap: 7px;
  align-items: center;
}

.second-footer-box h1 {
  height: auto;
  margin: 0px 0 -1px;
  font-size: 20px;
  color: #89bef9;
  /* text-shadow: 1px 1px 1px #fff; */
}

.second-footer-box h2 {
  height: auto;
  color: #fff;
  font-size: 0;
  margin: 5px 0;
  /* font-size: 14px; */
  /* margin: 5px 0 7px; */
}

.second-footer-box a {
  height: auto;
  color: #fff;
  font-size: 15px;
  margin: 0 0;
  text-decoration: none;
}

@media (max-width: 500px) {
  .second-footer-box h1 {
    height: auto;
    margin: 0px 0 -1px;
    font-size: 20px;
    color: #89bef9;
    /* text-shadow: 1px 1px 1px #fff; */
  }

  .second-footer-box h2 {
    height: auto;
    color: #fff;
    font-size: 0;
    margin: 5px 0;
    /* font-size: 14px; */
    /* margin: 5px 0 7px; */
  }

  .second-footer-box a {
    height: auto;
    color: #fff;
    font-size: 15px;
    margin: 0 0;
    text-decoration: none;
  }
}
/*  */

.therd-footer-box {
  height: auto;
  gap: 15px;
  /* margin: 20px 0; */
  width: 37%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-content: center;
}

.therd-footer-box h1 {
  height: auto;
  /* margin-bottom: 10px; */
  font-size: 14px;
  margin: 0;
  color: #ffffff;
  /* text-shadow: 1px 1px 1px #fff; */
}

/*   





*/

.fourt-footer-box {
  height: auto;
  display: flex;
  gap: 15px;
  flex-direction: column;
}

.fourt-footer-box h1 {
  height: auto;
  margin-bottom: 10px;
  font-size: 17px;
  color: #4d5e71;
  text-shadow: 1px 1px 1px #fff;
}

.fourt-footer-box h2 {
  height: auto;
  color: #fff;
  font-size: 14px;
  /* margin: 15px 0; */
}

@media (max-width: 500px) {
  .filter2 {
    display: flex;
    width: calc(100% - 0px);
    flex-wrap: wrap;
    justify-content: center;
    gap: 35px;
  }

  .first-footer-box {
    align-items: center;
  }

  .second-footer-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 0 25px 0px;
    gap: 15px;
    align-items: flex-start;
    align-content: flex-start;
  }

  .second-footer-box h2 {
    margin: 0;
  }

  .therd-footer-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 15px;
    align-items: flex-start;
  }

  .therd-footer-box h2 {
    margin: 0;
  }

  .fourt-footer-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 15px;
    align-items: flex-start;
  }

  .fourt-footer-box h2 {
    margin: 0;
  }
}

@media (max-width: 767px) {
  .filter2 {
    display: flex;
    width: calc(100% - 0px);
    flex-wrap: wrap;
    justify-content: center;
    gap: 35px;
  }

  .first-footer-box {
    align-items: center;
    width: 100%;
  }

  .second-footer-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 15px;
    align-items: flex-start;
    align-content: flex-start;
  }

  .second-footer-box h2 {
    margin: 0;
  }

  .therd-footer-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 15px;
    align-items: flex-start;
  }

  .therd-footer-box h2 {
    margin: 0;
  }

  .fourt-footer-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 15px;
    align-items: flex-start;
  }

  .fourt-footer-box h2 {
    margin: 0;
  }
}

/* 






*/
.slider-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.slider {
  display: flex;
  height: 100%;
}

.slide {
  flex: 0 0 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  gap: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content h1 {
  font-size: 25px;
}

.content p {
  font-size: 18px;
}

button {
  padding: 11px 20px;
  background-color: #9fb7d8;
  border: none;
  margin-top: 15px;
  color: #134578;
  font-weight: 600;
  font-family: auto;
  font-size: 13px;
  cursor: pointer;
  border-radius: 5px;
}

.Chimento-offices {
  height: auto;
  display: flex;
  gap: 30px;
  padding: 75px 10px;
  justify-content: space-around;
  align-items: center;
}

@media (max-width: 500px) {
  .Chimento-offices {
    display: flex;
    width: calc(100% - 0px);
    flex-wrap: wrap;
    justify-content: center;
    gap: 35px;
  }
}

@media (max-width: 767px) {
  .content h1 {
    font-size: 18px;
  }

  button {
    padding: 15px 19px;
    background-color: #9fb7d8;
    border: none;
    color: #ffffff;
    font-size: 10px;
    cursor: pointer;
    border-radius: 5px;
  }
}

@media (max-width: 500px) {
  .content h1 {
    font-size: 14.5px;
  }

  button {
    padding: 13px 17px;
    background-color: #9fb7d8;
    border: none;
    color: #ffffff;
    font-size: 10px;
    cursor: pointer;
    border-radius: 5px;
  }
}

.Chimento-offices-card {
  height: 100%;
  display: flex;
  gap: 35px;
  height: 190px;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.Chimento-offices-card-img {
  height: auto;
  max-height: 120px;
  max-width: 66%;
  border-radius: 11px;
}

#marketing-icon {
  max-height: 160px;
}

.Chimento-offices-card-img img {
  height: auto;
}

.Chimento-offices-card-titel {
  height: auto;
}

.Chimento-offices-card-titel {
  height: auto;
  font-size: 19px;
}

.Chimento-offices-card-titel h1 {
  height: auto;
}

@media (max-width: 767px) {
  .Chimento-offices-card-titel {
    height: auto;
    font-size: 17px;
  }
}

@media (max-width: 500px) {
  .Chimento-offices-card-titel {
    height: auto;
    font-size: 15px;
  }
}

@media (max-width: 500px) {
  .Chimento-offices-card-img {
    height: auto;
    max-width: 162px;
    /* max-height: 110px; */
    width: 100%;
    border-radius: 11px;
  }
}

.space {
  height: 10px;
  background-color: #a59072;
}

.layer1 {
  height: 10px;
  background: #a59072;
}

.layer2 {
  height: 5px;
  background: #ffffff;
}

.layer3 {
  height: 14px;
  background: #344e76;
}

.layer4 {
  height: 10px;
  background: #bfbfbf;
}
/* 



*/
.Chimento-service {
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  background: white;
  padding: 34px 10px;
}

.Chimento-service h1 {
  font-size: 24px;
}

@media (max-width: 500px) {
  .Chimento-service h1 {
    font-size: 23px;
  }
}

.Chimento-service-cardSlides {
  height: auto;
  display: flex;
  width: 100%;
  gap: 25px;
  overflow: auto;
  /* background: aliceblue; */
  padding: 30px 10px;
  justify-content: space-around;
}

@media (max-width: 767px) {
  .Chimento-service-cardSlides {
    height: auto;
    display: flex;
    width: 100%;
    gap: 25px;
    overflow: auto;
    padding: 50px 10px;
    justify-content: space-around;
    flex-wrap: wrap;
  }
}

@media (max-width: 600px) {
  .Chimento-service-cardSlides {
    height: auto;
    display: flex;
    width: 100%;
    gap: 25px;
    overflow: auto;
    padding: 50px 10px;
    justify-content: space-around;
    flex-wrap: wrap;
  }
}

@media (max-width: 450px) {
  .Chimento-service-cardSlides {
    height: auto;
    display: flex;
    width: 100%;
    gap: 25px;
    overflow: auto;
    padding: 35px 10px;
    justify-content: space-around;
    flex-wrap: wrap;
  }

  .Chimento-service h1 {
    font-size: 17px;
  }
}

.Chimento-service-card-background {
  width: 100%;

  border-radius: 10px;
  height: 100%;
  background-size: cover;
  position: relative;
}

.effect {
  background: #163e69cc;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.Chimento-service-card-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: white;
  text-align: center;
  padding: 20px;
}

.Chimento-service-card-content h2,
.Chimento-service-card-content p {
  margin: 0;
  font-size: 16px;
}

@media (max-width: 450px) {
  .Chimento-service-card-content h2,
  .Chimento-service-card-content p {
    margin: 0;
    font-size: 14px;
  }
}

.flip-card {
  background-color: transparent;
  width: calc(100% - 5px);
  height: 200px;
  border-radius: 10px;
  perspective: 1000px;
}

.flip-card-inner {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transition: transform 1s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotatex(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
  border-radius: inherit;
}

.flip-card-back {
  background-color: #22466c;
  color: white;
  display: flex;
  transform: rotatex(180deg);
  justify-content: space-around;
  gap: 15px;
  border-radius: 8px;
  padding: 15px;
  align-items: flex-end;
  flex-direction: column;
}

.flip-card-back h1 {
  font-size: 14px;
  color: #fff;
}

.flip-card-back a {
  font-size: 14px;
  background: #fff;
  color: #000;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 10px 16px;
  border-radius: 30px;
}

@media (max-width: 767px) {
  .flip-card {
    width: calc(50% - 14px);
  }
}

@media (max-width: 450px) {
  .flip-card {
    width: calc(100% - 0px);
  }
}

/* 

             









*/
.our-works {
  width: 100%;
  height: 100%;

  background-repeat: no-repeat;

  background-size: cover;
  .our-image {
    filter: grayscale(50%) sepia(100%) hue-rotate(90deg);
  }

  .our-image-transparent {
    opacity: 0.7;
  }
  background-position: center;
}

.our-works-header {
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #ffffff;
  /* border-top: 10px solid #a59072; */
}

@media (max-width: 767px) {
  .our-works-header {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 12px;
    background: #ffffff;
    /* border-top: 10px solid #a59072; */
  }
}

.our-works-header h1 {
  height: auto;
  color: #4d5e71;
  text-shadow: 1px 1px 1px #fff;
  /* box-shadow: 1px 1px 1px #fff; */
  font-size: 24px;
}

.our-works-header h2 {
  height: auto;
  color: #20252d;
  font-size: 18px;
}

@media (max-width: 767px) {
  .our-works-header h1 {
    height: auto;
    font-size: 17px;
  }

  .our-works-header h2 {
    height: auto;
    color: #20252d;
    font-size: 15px;
  }
}

/* 




first slide



*/

.our-works1-slider {
  display: flex;
  /* overflow-x: hidden; */
  align-items: center;
  gap: 25px;
  padding: 100px 20px;
  justify-content: space-evenly;
  align-content: center;
  width: calc(100% - 0px);
  flex-wrap: wrap;
}

.our-works1-slider {
  display: flex;
  /* overflow-x: hidden; */
  align-items: center;
  gap: 25px;
  padding: 100px 20px;
  justify-content: space-evenly;
  align-content: center;
  width: calc(100% - 0px);
  flex-wrap: wrap;
}

.our-works1-card {
  /* flex: 3; */
  max-width: 320px;
  width: calc(100% - 0px);
  /* border: 1.5px solid #ccc; */
  padding: 20px;
  display: flex;
  border-radius: 8px;
  backdrop-filter: blur(3px);
  gap: 5px;
  align-items: center;
  justify-content: center;
  align-content: center;
}

.our-works1-card::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  z-index: -1;
  border: 1.5px solid transparent;
  mask-composite: exclude;
}

.our-works1-card img {
  max-width: 320px;
  min-width: 320px;
  min-height: 185px;
  max-height: 185px;
  border-radius: 6px;
}

.our-works1-card-content {
  padding: 12px 0 0;
  color: #f9f9f9;
  display: flex;
  /* border: 1px solid #ddd; */
  align-items: center;
  justify-content: center;
  align-content: center;
}

.our-works1-card-content h2 {
  margin-top: 0;
  font-size: 15px;
}

.our-works1-card-content p {
  margin-bottom: 0;
}

@media (max-width: 500px) {
  .our-works1-slider {
    display: flex;
    /* overflow-x: hidden; */
    align-items: center;
    gap: 25px;
    padding: 100px 20px;
    justify-content: space-evenly;
    align-content: center;
    width: calc(100% - 0px);
  }

  .our-works1-card {
    /* flex: 1; */
    max-width: fit-content;
    width: calc(100% - 0px);
    border: 1.5px solid #ccc;
    padding: 20px;
    /* display: flex; */
    border-radius: 8px;
    backdrop-filter: blur(3px);
    gap: 5px;
  }

  .our-works1-card-content h2 {
    font-size: 12px;
  }
}
/* 


second slide




*/

.our-works2-slider {
  display: flex;
  /* overflow-x: hidden; */
  align-items: center;
  gap: 25px;
  padding: 100px 20px;
  justify-content: space-evenly;
  align-content: center;
  width: calc(100% - 0px);
  flex-wrap: wrap;
}

.our-works22-slider {
  display: flex;
  /* overflow-x: hidden; */
  align-items: center;
  gap: 25px;
  padding: 100px 20px;
  justify-content: space-evenly;
  align-content: center;
  width: calc(100% - 0px);
  flex-wrap: wrap;
}

.our-works2-card {
  /* flex: 3; */
  max-width: 320px;
  width: calc(100% - 0px);
  /* border: 1.5px solid #ccc; */
  padding: 20px;
  display: flex;
  border-radius: 8px;
  backdrop-filter: blur(3px);
  gap: 5px;
  align-items: center;
  justify-content: center;
  align-content: center;
}

.our-works2-card::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  z-index: -1;
  border: 1.5px solid transparent;
  mask-composite: exclude;
}

.our-works2-card img {
  max-width: 320px;
  min-width: 320px;
  min-height: 185px;
  max-height: 185px;
  border-radius: 6px;
}

.our-works2-card-content {
  padding: 12px 0 0;
  color: #f9f9f9;
  display: flex;
  /* border: 1px solid #ddd; */
  align-items: center;
  justify-content: center;
  align-content: center;
}

.our-works2-card-content h2 {
  margin-top: 0;
  font-size: 15px;
}

.our-works2-card-content p {
  margin-bottom: 0;
}

@media (max-width: 500px) {
  .our-works2-slider {
    display: flex;
    /* overflow-x: hidden; */
    align-items: center;
    gap: 25px;
    padding: 100px 20px;
    justify-content: space-evenly;
    align-content: center;
    width: calc(100% - 0px);
  }

  .our-works2-card {
    /* flex: 1; */
    max-width: fit-content;
    width: calc(100% - 0px);
    border: 1.5px solid #ccc;
    padding: 20px;
    /* display: flex; */
    border-radius: 8px;
    backdrop-filter: blur(3px);
    gap: 5px;
  }

  .our-works2-card-content h2 {
    font-size: 12px;
  }
}

/* 


therd slider



*/

.our-works3-slider {
  display: flex;
  /* overflow-x: hidden; */
  align-items: center;
  gap: 25px;
  padding: 100px 20px;
  justify-content: space-evenly;
  align-content: center;
  width: calc(100% - 0px);
  flex-wrap: wrap;
}

.our-works3-slider {
  display: flex;
  /* overflow-x: hidden; */
  align-items: center;
  gap: 25px;
  padding: 100px 20px;
  justify-content: space-evenly;
  align-content: center;
  width: calc(100% - 0px);
  flex-wrap: wrap;
}

.our-works3-card {
  /* flex: 3; */
  max-width: 320px;
  width: calc(100% - 0px);
  /* border: 1.5px solid #ccc; */
  padding: 20px;
  display: flex;
  border-radius: 8px;
  backdrop-filter: blur(3px);
  gap: 5px;
  align-items: center;
  justify-content: center;
  align-content: center;
}

.our-works3-card::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  z-index: -1;
  border: 1.5px solid transparent;
  mask-composite: exclude;
}

.our-works3-card img {
  max-width: 320px;
  min-width: 320px;
  min-height: 185px;
  max-height: 185px;
  border-radius: 6px;
}

.our-works3-card-content {
  padding: 12px 0 0;
  color: #f9f9f9;
  display: flex;
  /* border: 1px solid #ddd; */
  align-items: center;
  justify-content: center;
  align-content: center;
}

.our-works3-card-content h2 {
  margin-top: 0;
  font-size: 15px;
}

.our-works3-card-content p {
  margin-bottom: 0;
}

@media (max-width: 500px) {
  .our-works3-slider {
    display: flex;
    /* overflow-x: hidden; */
    align-items: center;
    gap: 25px;
    padding: 100px 20px;
    justify-content: space-evenly;
    align-content: center;
    width: calc(100% - 0px);
  }

  .our-works3-card {
    /* flex: 1; */
    max-width: fit-content;
    width: calc(100% - 0px);
    border: 1.5px solid #ccc;
    padding: 20px;
    /* display: flex; */
    border-radius: 8px;
    backdrop-filter: blur(3px);
    gap: 5px;
  }

  .our-works3-card-content h2 {
    font-size: 12px;
  }
}

/* 



forth slider




*/

.our-works4-slider {
  display: flex;
  /* overflow-x: hidden; */
  align-items: center;
  gap: 25px;
  padding: 100px 20px;
  justify-content: space-evenly;
  align-content: center;
  width: calc(100% - 0px);
  flex-wrap: wrap;
}

.our-works4-slider {
  display: flex;
  /* overflow-x: hidden; */
  align-items: center;
  gap: 25px;
  padding: 100px 20px;
  justify-content: space-evenly;
  align-content: center;
  width: calc(100% - 0px);
  flex-wrap: wrap;
}

.our-works4-card {
  /* flex: 3; */
  max-width: 320px;
  width: calc(100% - 0px);
  /* border: 1.5px solid #ccc; */
  padding: 20px;
  display: flex;
  border-radius: 8px;
  backdrop-filter: blur(3px);
  gap: 5px;
  align-items: center;
  justify-content: center;
  align-content: center;
}

.our-works4-card::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  z-index: -1;
  border: 1.5px solid transparent;
  mask-composite: exclude;
}

.our-works4-card img {
  max-width: 320px;
  min-width: 320px;
  min-height: 185px;
  max-height: 185px;
  border-radius: 6px;
}

.our-works4-card-content {
  padding: 12px 0 0;
  color: #f9f9f9;
  display: flex;
  /* border: 1px solid #ddd; */
  align-items: center;
  justify-content: center;
  align-content: center;
}

.our-works4-card-content h2 {
  margin-top: 0;
  font-size: 15px;
}

.our-works4-card-content p {
  margin-bottom: 0;
}

@media (max-width: 500px) {
  .our-works4-slider {
    display: flex;
    /* overflow-x: hidden; */
    align-items: center;
    gap: 25px;
    padding: 100px 20px;
    justify-content: space-evenly;
    align-content: center;
    width: calc(100% - 0px);
  }

  .our-works4-card {
    /* flex: 1; */
    max-width: fit-content;
    width: calc(100% - 0px);
    border: 1.5px solid #ccc;
    padding: 20px;
    /* display: flex; */
    border-radius: 8px;
    backdrop-filter: blur(3px);
    gap: 5px;
  }

  .our-works4-card-content h2 {
    font-size: 12px;
  }
}

/* 










previous-work PAGE
















*/
.previous-work-container {
  padding: 20px;
  background-size: cover;
  background-position: center;
  font-family: "Montserrat";
}
.previous-work-cards {
  display: flex;
  /* overflow-x: hidden; */
  align-items: center;
  z-index: 1;
  position: relative;
  /* gap: 25px; */
  column-gap: 15px;
  row-gap: 15px;
  /* padding: 10px 20px; */
  justify-content: space-evenly;
  align-content: center;
  width: calc(100% - 0px);
  /* background: #1b110582; */
  flex-wrap: wrap;
  font-family: "Montserrat";
}

.previous-work-container-titel {
  display: flex;
  padding: 15px;
  gap: 1px;
  flex-direction: column;
}
.previous-work-container-titel-with-filter {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.previous-work-container-titel-with-filter h1 {
  font-size: 23px;
  color: #fff;
  text-shadow: 1px 1px 9px #0c0c0c;
}
.previous-work-container-titel h2 {
  font-size: 12px;
  padding: 5px 10px;
  margin: 15px 0 0px;
  border-radius: 4px;
  width: fit-content;
  background: #fff;
  color: #182b49;
}

.previous-work-card {
  /* flex: 3; */
  max-width: 320px;
  width: calc(100% - 0px);
  border: 1.5px solid #ccc;
  padding: 16px;
  /* display: flex; */
  border-radius: 8px;
  background: #0e0e0e59;
  backdrop-filter: blur(3px);
  gap: 5px;
}

.previous-work-card img {
  z-index: 3;
  max-width: 285px;
  min-width: 285px;
  min-height: 185px;
  max-height: 185px;
  position: relative;
  border-radius: 6px;
}

.previous-work-card-content {
  padding: 10px 0 0;
  color: #f9f9f9;
  /* border: 1px solid #ddd; */
}

.previous-work-card-content h2 {
  margin-top: 0;
  position: relative;
  z-index: 3;
  font-size: 15px;
}

.previous-work-card-content p {
  margin-bottom: 0;
}

/*     */
.previous-work-card {
  position: relative;
}

.previous-work-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-radius: inherit;
  height: 100%;
  pointer-events: none;
  background: radial-gradient(
    370px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgb(163 132 89),
    #ffffff00 26%
  );
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s;
}

.previous-work-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: radial-gradient(
    900px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgb(227 255 13 / 0%),
    #ffffff00 40%
  );
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s;
}

.previous-work-cards:hover > .previous-work-card::before,
.previous-work-cards:hover > .previous-work-card::after {
  opacity: 1;
}

@media (max-width: 500px) {
  .previous-work-cards {
    display: flex;
    /* overflow-x: hidden; */
    align-items: center;
    gap: 25px;
    padding: 0px 0px;
    justify-content: space-evenly;
    align-content: center;
    width: calc(100% - 0px);
  }

  .previous-work-card {
    /* flex: 1; */
    max-width: fit-content;
    width: calc(100% - 0px);
    border: 1.5px solid #ccc;
    padding: 20px;
    /* display: flex; */
    border-radius: 8px;
    backdrop-filter: blur(3px);
    gap: 5px;
  }

  .previous-work-card-content h2 {
    font-size: 12px;
  }
}

.filter-container {
  /* background: violet; */
  border: none;
}
.filter-select {
  padding: 8px 13px;
  font-size: 13px;
  border: none;
  border-radius: 4px;
  background-color: #ffe6b1;
  cursor: pointer;
}

.filter-select::-ms-expand {
  display: none;
}

.filter-select option {
  background-color: #20252d;
  color: #fff;
  border-radius: 5px;
}

.filter-select option:hover {
  background-color: #ddd;
}

.filter-select option:checked {
  background-color: #edbe6c;
  color: #fff;
  border: none;
}

.parts {
  display: flex;
  flex-direction: column;
}

/* 




*/

.Chimento-service-discount {
  height: auto;
}

.Chimento-service-discount-disc {
  height: auto;
  background: #134578;
  padding: 40px;
  gap: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.Chimento-service-discount-titel {
  height: auto;
  color: #ffffff;
  font-size: 18px;
}
.Chimento-service-discount-titel h1 {
  height: auto;
}
.Chimento-service-discount-percent {
  height: auto;
  color: #63b0ff;
  font-size: 26px;
}
.Chimento-service-discount-percent p {
  height: auto;
}
.Chimento-service-discount-text {
  height: auto;
  color: #ffffff;
  font-size: 14px;
}
.Chimento-service-discount-text h2 {
  height: auto;
}
.plus {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  align-content: center;
}